<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="icon"
	href="https://jscdn.com.cn/highcharts/images/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* var chart = Highcharts.chart('container',{
	chart: {
		type: 'column'
	},
	title: {
		text: '月平均降雨量'
	},
	subtitle: {
		text: '数据来源: WorldClimate.com'
	},
	xAxis: {
		categories: [
			'0.5%','1%','2%','5%','10%','50%','100%'
		],
		crosshair: true
	},
	yAxis: {
		min: 0,
		title: {
			text: '降雨量 (mm)'
		}
	},
	tooltip: {
		// head + 每个 point + footer 拼接成完整的 table
		headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
		pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
		'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
		footerFormat: '</table>',
		shared: true,
		useHTML: true
	},
	plotOptions: {
		column: {
			borderWidth: 0
		}
	},
	series: [{
		name: 'la16.txt(10x10)',
		data: [96.23,96.23,96.33 ,96.23 ,94.69 ,91.39 ,91.04 ],
		type: 'column',
	}, {
		name: 'ta42.txt(30x20)',
		data: [74.38 ,78.60 ,79.53 ,79.09 ,78.63 ,72.32 ,72.32  ]
	}, {
		name: 'dmu76.txt(50x20)',
		data: [66.86 ,68.73 ,70.22 ,72.38 ,70.77 ,66.47 ,61.92 ]
	}]
});  

var chart = Highcharts.chart('container',{
	chart: {
		type: 'column'
	},
	title: {
		text: '月平均降雨量'
	},
	subtitle: {
		text: '数据来源: WorldClimate.com'
	},
	xAxis: {
		categories: [
			'la16.txt(10x10)','ta42.txt(30x20)','dmu76.txt(50x20)'
		],
		crosshair: true
	},
	yAxis: {
		min: 0,
		title: {
			text: '降雨量 (mm)'
		}
	},
	tooltip: {
		// head + 每个 point + footer 拼接成完整的 table
		headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
		pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
		'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
		footerFormat: '</table>',
		shared: true,
		useHTML: true
	},
	plotOptions: {
		column: {
			borderWidth: 0
		}
	},
	series: [{
		name: '0.5%',
		data: [96.23, 74.38, 66.86 ]
	}, {
		name: '1%',
		data: [96.23, 78.60, 68.73 ]
	}, {
		name: '2%',
		data: [96.33, 79.53 ,70.22]
	}, {
		name: '5%',
		data: [96.23, 79.09, 72.38 ]
	}, {
		name: '10%',
		data: [94.69, 78.63, 70.77]
	}, {
		name: '50%',
		data: [91.39, 72.32, 66.47 ]
	}, {
		name: '100%',
		data: [91.04, 72.32, 61.92 ]
	}]
});


var chart = Highcharts.chart('container',{
	chart: {
		type: 'line'
	},
	title: {
		text: '月平均降雨量'
	},
	subtitle: {
		text: '数据来源: WorldClimate.com'
	},
	legend : {
		layout : 'vertical',
		align : 'right',
		verticalAlign : 'top',
		x : -50,
		y : 60,
		floating : true,
		symbolWidth:50,
		itemStyle : {
			fontSize : '10px'
		}
	},
	xAxis: {
		categories: [
			'0.5%','1%','2%','5%','10%','50%','100%'
		],
		crosshair: true
	},
	yAxis: [{
		lineWidth: 1,
		title: {
			text: 'Scheduling score (%)'
		}
	}, {
		lineWidth: 1,
		opposite: true,
		title: {
			text: 'Average runtime per episode'
		}
	}],
	tooltip: {
		// head + 每个 point + footer 拼接成完整的 table
		headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
		pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
		'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
		footerFormat: '</table>',
		shared: true,
		useHTML: true
	},
	plotOptions: {
		column: {
			borderWidth: 0
		}
	},
	series: [{
		name: 'la16.txt(10x10)',
		data: [96.23,96.23,96.33 ,96.23 ,94.69 ,91.39 ,91.04 ],
		color : 'blue',
	}, {
		name:'la16.txt(10x10) 时间',
		data:[1.174999725,0.6110571,0.269745538,0.1556756,0.063347113,0.05033445],
		color : 'blue',
		dashStyle:'Dash',
		yAxis: 1
	},{
		name: 'ta42.txt(30x20)',
		data: [74.38 ,78.60 ,79.53 ,79.09 ,78.63 ,72.32 ,72.32  ],
		color : 'red',
	}, {
		name:'ta42.txt(30x20) 时间',
		data:[6.738332038,4.124451225,2.522845713,0.357506063,0.218158325,0.105043363,0.0824731],
		color : 'red',
		dashStyle:'Dash',
		yAxis: 1
	}, {
		name: 'dmu76.txt(50x20)',
		data: [66.86 ,68.73 ,70.22 ,72.38 ,70.77 ,66.47 ,61.92 ],
		color : 'green',
	},{
		name:'dmu76.txt(50x20) 时间',
		data:[4.197822275,2.18917905,1.206901413,0.587193263,0.398545013,0.2356853,0.189914925],
		color : 'green',
		dashStyle:'Dash',
		yAxis: 1
	}]
});  


*/
</style>
<script src="https://code.highcharts.com.cn/highcharts/highcharts.js"></script>
<script
	src="https://code.highcharts.com.cn/highcharts/modules/exporting.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/modules/oldie.js"></script>
<script
	src="https://code.highcharts.com.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
</head>
<body>
	<div id="container" style="min-width: 1000px; min-height: 900px"></div>
	<script>
		var chart = Highcharts
				.chart(
						'container',
						{
							chart : {
								type : 'line'
							},
							title : {
								text : 'Scheduling score and running time per episode under different skip ratios'
							},
							credits : {
								enabled : false
							},
							exporting : {
								sourceWidth : 1280,
								sourceHeight : 720,
								scale : 1.0
							},
							legend : {
								layout : 'vertical',
								align : 'right',
								verticalAlign : 'top',
								x : -100,
								y : 40,
								floating : true,
								symbolWidth : 50,
								itemStyle : {
									fontSize : '13px'
								}
							},
							xAxis : {
								categories : [ '0.5', '1', '2', '5', '10',
										'50', '100' ],
								crosshair : true,
								title : {
									text : 'Skip ratio (%)',
									style : {
										"color" : 'black',
										"cursor" : "default",
										"fontSize" : "18px",
										"fontFamily" : "Time New Roman"
									}
								},
								labels : {
									rotation : 0,
									style : {
										"color" : 'black',
										"cursor" : "default",
										"fontSize" : "18px",
										"fontFamily" : "Time New Roman"
									}
								},
								tickWidth : 1,
								tickmarkPlacement : 'on'
							},
							yAxis : [ {
								lineWidth : 1,
								title : {
									text : 'Scheduling score (%)',
									style : {
										"color" : 'black',
										"cursor" : "default",
										"fontSize" : "18px",
										"fontFamily" : "Time New Roman"
									}
								},
								labels : {
									style : {
										"color" : 'rgb(255,112,67)',
										"cursor" : "default",
										"fontSize" : "18px",
										"fontFamily" : "Time New Roman"
									}
								}
							}, {
								lineWidth : 1,
								opposite : true,
								title : {
									text : 'Average runtime per episode (s)',
									style : {
										"color" : 'black',
										"cursor" : "default",
										"fontSize" : "18px",
										"fontFamily" : "Time New Roman"
									}
								},
								labels : {
									style : {
										"color" : 'rgb(51,187,238)',
										"cursor" : "default",
										"fontSize" : "18px",
										"fontFamily" : "Time New Roman"
									}
								}
							} ],
							tooltip : {
								// head + 每个 point + footer 拼接成完整的 table
								headerFormat : '<span style="font-size:10px">{point.key}</span><table>',
								pointFormat : '<tr><td style="color:{series.color};padding:0">{series.name}: </td>'
										+ '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
								footerFormat : '</table>',
								shared : true,
								useHTML : true
							},
							plotOptions : {
								column : {
									borderWidth : 0
								}
							},
							series : [
									{
										name : 'scheduling score of la16.txt(10x10)',
										data : [ 96.23, 96.23, 96.43, 96.23,
												94.69, 91.39, 91.04 ],
										color : 'rgb(255,112,67)',
										dataLabels : {
											align : 'center',
											enabled : true,
											style : {
												"color" : 'rgb(255,112,67)',
												"cursor" : "default",
												"fontSize" : "14px",
												"fontFamily" : "Time New Roman"
											}
										},
										marker : {
											enabled : true,
											symbol : 'circle',
											radius : 5
										}
									},
									{
										name : 'runtime of la16.txt(10x10)',
										data : [ 0.693, 0.693, 0.362, 0.158,
												0.091, 0.038, 0.020 ],
										color : 'rgb(51,187,238)',
										dataLabels : {
											align : 'center',
											enabled : true,
											style : {
												"color" : 'rgb(51,187,238)',
												"cursor" : "default",
												"fontSize" : "14px",
												"fontFamily" : "Time New Roman"
											}
										},
										marker : {
											enabled : true,
											symbol : 'circle',
											radius : 5
										},
										dashStyle : 'Dash',
										yAxis : 1
									},
									{
										name : 'scheduling score of ta42.txt(30x20)',
										data : [ 76.18, 78.60, 80.14, 79.09,
												78.63, 72.32, 72.32 ],
										color : 'rgb(255,112,67)',
										dataLabels : {
											align : 'center',
											enabled : true,
											style : {
												"color" : 'rgb(255,112,67)',
												"cursor" : "default",
												"fontSize" : "14px",
												"fontFamily" : "Time New Roman"
											}
										},
										marker : {
											enabled : true,
											symbol : 'square',
											radius : 5
										}
									},
									{
										name : 'runtime of ta42.txt(30x20)',
										data : [ 2.755, 1.425, 0.762, 0.358,
												0.218, 0.105, 0.082 ],
										color : 'rgb(51,187,238)',
										dataLabels : {
											align : 'center',
											enabled : true,
											style : {
												"color" : 'rgb(51,187,238)',
												"cursor" : "default",
												"fontSize" : "14px",
												"fontFamily" : "Time New Roman"
											}
										},
										marker : {
											enabled : true,
											symbol : 'square',
											radius : 5
										},
										dashStyle : 'Dash',
										yAxis : 1
									},
									{
										name : 'scheduling score of dmu76.txt(50x20)',
										data : [ 70.56, 72.54, 74.11, 76.39,
												74.68, 70.15, 61.92 ],
										color : 'rgb(255,112,67)',
										dataLabels : {
											align : 'center',
											enabled : true,
											style : {
												"color" : 'rgb(255,112,67)',
												"cursor" : "default",
												"fontSize" : "14px",
												"fontFamily" : "Time New Roman"
											}
										},
										marker : {
											enabled : true,
											symbol : 'triangle',
											radius : 5
										}
									},
									{
										name : 'runtime of dmu76.txt(50x20)',
										data : [ 4.198, 2.189, 1.207, 0.587,
												0.399, 0.236, 0.190 ],
										color : 'rgb(51,187,238)',
										dataLabels : {
											align : 'center',
											enabled : true,
											style : {
												"color" : 'rgb(51,187,238)',
												"cursor" : "default",
												"fontSize" : "14px",
												"fontFamily" : "Time New Roman"
											}
										},
										marker : {
											enabled : true,
											symbol : 'triangle',
											radius : 5
										},
										dashStyle : 'Dash',
										yAxis : 1
									} ]
						});
	</script>
</body>
</html>